<template>
  <div id="app">
    <div class="video-container">
      <div class="video-grid" v-infinite-scroll="loadVideos" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <div class="video-item" v-for="(video, index) in videos" :key="index">
          <div v-if="!video.error">
            <video  class="video" :src="video.src" autoplay controls @error="handleVideoError(index)"></video>
            <div class="video-title">{{ video.title }}</div>
            <div class="video-description">{{ video.description }}</div>
          </div>
          <div v-else class="video-error">
            加载失败
          </div>
        </div>
      </div>
      <div class="loading" v-if="loading">
        <el-skeleton :rows="4" animated />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题1', description: '关于商城的视频1', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题2', description: '关于商城的视频2', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题3', description: '关于商城的视频3', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题4', description: '关于商城的视频4', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题5', description: '关于商城的视频5', error: false },
        { src: 'https://player.vimeo.com/video/212003915/4b5fb689e058b479f0679d4a95f731c9/524x296.mp4?filename=Commercial%20Space%20in%20Vimeo.mp4', title: '视频标题6', description: '关于商城的视频6', error: false },
        { src: 'https://player.vimeo.com/video/212003940/4b5fb689e058b479f0679d4a95f731c9/524x296.mp4?filename=Commercial%20Space%20in%20Vimeo.mp4', title: '视频标题7', description: '关于商城的视频7', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题8', description: '关于商城的视频8', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题9', description: '关于商城的视频9', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题10', description: '关于商城的视频10', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题11', description: '关于商城的视频11', error: false },
        { src: 'https://www.w3schools.com/html/mov_bbb.mp4', title: '视频标题12', description: '关于商城的视频12', error: false },
      ],
      page: 1,
      loading: false,
    };
  },
  mounted() {
    this.loadVideos();
  },
  methods: {
    async loadVideos() {
      this.loading = true;
      console.log('加载视频第', this.page, '页');
      try {
        // 模拟请求数据
        const response = await this.fetchMockData(this.page);
        this.videos = this.videos.concat(response.data.videos);
        this.page++;
      } catch (error) {
        console.error('加载视频失败:', error);
      } finally {
        this.loading = false;
      }
    },
    fetchMockData(page) {
      // 模拟数据请求
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: {
              videos: [
                { src: `https://www.w3schools.com/html/mov_bbb.mp4`, title: `视频标题${20 + (page - 1) * 4 + 1}`, description: `关于商城的视频${20 + (page - 1) * 4 + 1}`, error: false },
                { src: `https://www.w3schools.com/html/mov_bbb.mp4`, description: `关于商城的视频${20 + (page - 1) * 4 + 2}`, error: false },
                { src: `https://www.w3schools.com/html/mov_bbb.mp4`, description: `关于商城的视频${20 + (page - 1) * 4 + 3}`, error: false },
                { src: `https://www.w3schools.com/html/mov_bbb.mp4`, description: `关于商城的视频${20 + (page - 1) * 4 + 4}`, error: false },
              ],
            },
          });
        }, 2000); // 模拟2秒的请求延迟
      });
    },
    handleVideoError(index) {
      console.error(`视频加载失败: ${index}`);
      this.videos[index].error = true;
    },
  },
};
</script>

<style>
.video-container {
  padding: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.video-item {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
  position: relative;
}

.video-item video {
  width: 100%;
  border-radius: 8px;
}
.video-title {
  font-size: 16px;
  margin-top: 10px;
}

.video-description {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #f56c6c;
  background-color: rgba(255, 245, 245, 0.8);
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center;
}

.loading {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
</style>
